<template>
	<div class="common-layout1" ref="carouselFourc">
		<el-carousel
			class="content-right1"
			@change="changeLB"
			ref="carousel"
			@mouseenter.native="delHandleMouseEnter"
			height="100vh"
			:interval="15000"
		>
			<el-carousel-item>
				<Home v-if="indexActive == 0" />
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<energystation v-if="indexActive == 1" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<energyunit v-if="indexActive == 2" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<psc v-if="indexActive == 3" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<batterystack v-if="indexActive == 4" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<batterycluster v-if="indexActive == 5" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<photovoltaic v-if="indexActive == 6" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<waringlist v-if="indexActive == 7" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar
						class="scrollbar-wrapper"
						v-if="indexActive == 8"
						style="height: 100%"
					>
						<div class="statement">
							<el-tabs v-model="activeName">
								<el-tab-pane label="收益" name="1">
									<div class="table-main">
										<div class="table-container">
											<el-table
												:data="reportList"
												style="width: 100%"
												height="100%"
												ref="earningTable"
											>
												<el-table-column prop="date" label="日期">
												</el-table-column>
												<el-table-column prop="income148" label="148间隔(元)">
												</el-table-column>
												<el-table-column prop="income149" label="149间隔(元)">
												</el-table-column>
												<el-table-column
													prop="incomeBmsTotal"
													label="储能总（元）"
												>
												</el-table-column>
												<el-table-column prop="incomePv" label="光伏（元）">
												</el-table-column>
												<el-table-column
													prop="incomeStationTotal"
													label="全站总（元）"
												>
												</el-table-column>
											</el-table>
											<div></div>
										</div>
									</div>
								</el-tab-pane>
							</el-tabs>
						</div>
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<cost v-if="indexActive == 9" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<control v-if="indexActive == 10" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar
						class="scrollbar-wrapper"
						v-if="indexActive == 11"
						style="height: 100%"
					>
						<site-photos />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>
<script>
import Home from '../Home/home.vue'
import energystation from '../energystation/index.vue'
import energyunit from '../energyunit/index.vue'
import psc from '../psc/index.vue'
import ScaleScreen from '@/components/scale-screen/scale-screen.vue'

import batterystack from '../batterystack/index.vue'
import batterycluster from '../batterycluster/index.vue'
import photovoltaic from '../photovoltaic/index.vue'
import waringlist from '../waringlist/index.vue'
import cost from '../cost/index.vue'
import control from '../control/index.vue'
import SitePhotos from '../site-photos/index.vue'
import { getBmsIncome } from '@/api/modules/statement'
export default {
	components: {
		Home,
		energystation,
		energyunit,
		psc,
		batterystack,
		batterycluster,
		photovoltaic,
		ScaleScreen,
		waringlist,
		cost,
		control,
		SitePhotos,
	},
	data() {
		return {
			indexActive: 0,
			// timer: false,
			activeName: '1',
			reportList: [],
		}
	},
	mounted() {
		this.$refs.carousel.handleMouseEnter = () => {}
		let self = this
		window.addEventListener('keyup', self.keyTagfunction)
		// this.timer = setInterval(() => {
		// 	self.indexActive <= 8 ? self.indexActive++ : (self.indexActive = 0);
		// 	// console.log(self.indexActive);
		// 	this.$refs.carousel.next();
		// }, 10000);
		getBmsIncome({ month: '2024-06' }).then((res) => {
			if (res.code == 200) {
				this.reportList = res.data
			} else {
				this.$Message({
					text: res.msg,
					type: 'warning',
				})
			}
		})
	},
	beforeDestroy() {
		let self = this
		// clearInterval(this.timer);
		window.removeEventListener('keyup', self.keyTagfunction)
	},
	methods: {
		keyTagfunction(e) {
			if (e && e.keyCode == '27') this.$router.push({ path: '/home' })
		},
		changeLB(newVal, oldVal) {
			this.indexActive = newVal

			//设置收益table滚动条在最下方
			// if (this.indexActive == 11) {
			// 	this.$nextTick(() => {
			// 		const tableBodyWrapper = this.$refs.earningTable.$el.querySelector(
			// 			".el-table__body-wrapper"
			// 		);
			// 		if (tableBodyWrapper) {
			// 			tableBodyWrapper.scrollTop = tableBodyWrapper.scrollHeight + "px";
			// 		}
			// 	});
			// }
		},
		delHandleMouseEnter() {
			this.$refs.carousel.handleMouseEnter = () => {}
		},
	},
}
</script>
<style lang="scss">
.el-carousel {
	width: 100%;
	height: 100%;
}

.el-carousel__container,
.el-carousel-item {
	width: 100%;
	height: 100%;
	background-color: #050614;
}
.el-scrollbar__view {
	height: 100%;
}

.timers1 {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #fff;
	z-index: 11;
	cursor: pointer;
}

.table-container {
	height: 100%;
}
.table-main {
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
}
</style>
